<template>
  <view class="index-container">
    <MusicControl />
    <z-swiper v-model="list" :options="options" class="index-swiper" >
      <z-swiper-item v-for="(item,index) in list" :key="index" style="width: 100%;height: 100%;">
        <image class="index-image " :src="item" mode="aspectFill" @click="hedaer"></image>
      </z-swiper-item>
    </z-swiper>
    <view class="index-top-container" >
      <view class="index-yunwu1">
        <image :src="imageUrl +  '/images/imagesRectangle-34625061.png'" style="height: 100%; width: 100%;"></image>
      </view>
      <view class="index-logotubiao">
        <image :src="imageUrl + '/images/imagesGroup-837.png'" style="height: 100%; width: 100%;"></image>
      </view>
      <view class="index-text-logo">今日{{num}}人来过</view>
    </view>
    <view class="index-zhongjian-container" >
      <view class="index-biaotilogo">
        <z-swiper v-model="list2" :options="tblogo" class="index-swiper-biaotilogo">
          <z-swiper-item v-for="(item,index) in list2" :key="index" style="height: 100%; width: 100%;">
            <image :src="item" mode="aspectFill" class="index-fubiaoti"></image>
          </z-swiper-item>
        </z-swiper>
      </view>
    </view>
    <view class="index-botton-container" >
      <view class="index-yunwu2">
        <image :src="imageUrl + '/images/imagesFrame-1345 1.png'" mode="aspectFill" style="height: 100%; width: 100%;"></image>
      </view>
      <view class="index-anniu1">
        <image :src="imageUrl + '/images/imagesGroup-844.png'" mode="aspectFill" style="height: 179.6rpx; width: 378.11rpx;" @click="display"></image>
      </view>
      <view class="index-anniu2" ></view>
      <view class="index-anniu3">
        <image :src="imageUrl + '/images/imagesGroup-788.png'" mode="aspectFill" style="height: 100%; width: 100%;" :class="{ 'arrow-fade': true }"></image>
      </view>
    </view>
  </view>
</template>

<script>
import MusicControl from '../../../common/MusicControl.vue'
export default {
  components: {
    MusicControl,
  },
  data() {
    return {
	  currentPath: '', // 定义当前页面路径属性
      imageUrl: this.$imageUrl,
      touchStartX: 0,
      touchStartY: 0,
      startY: 0,
      isTouching: false,
      num: 66,
      options: {
        loop: true,
        effect: 'fade',
        direction: 'vertical',
        speed: 2000, //淡入淡出的速度
        autoplay: {
          delay: 3000, //3 秒切换一次
        },
        fadeEffect: {
          crossFade: true,
        },
      },
      tblogo: {
        loop: true,
        effect: 'fade',
        noSwiping: 'false',
        grabCursor: 'true',
        direction: 'vertical',
        speed: 2000,
        autoplay: {
          delay: 3000, //3 秒切换一次
        },
        fadeEffect: {
          crossFade: true,
        },
      },
      list: [
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesimage-289.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesbeijing2.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesbeijing3.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesbeijing4.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesbeijing5.png",
      ],
      list2: [
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesGroup-1219.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesGroup2.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesGroup3.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesGroup4.png",
        "https://xnlv-test.lizxx.com/image/xnlv/static/images/imagesGroup5.png",
      ],
    };
  },
  methods: {
    hedaer() {
      wx.redirectTo({
        url: '/pages-guide/guide',
      })
    },
    display() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const currentPath = currentPage.route;
      console.log('当前页面路径：', currentPath);
      wx.redirectTo({
        url: `/pages/index/shouyeziwenjian?fromPage=${currentPath}`,
      });
    }
  },
};
</script>

<style scoped>
.index-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
}
.index-swiper {
  position: absolute;
  height: 88vh;
  width: 100%;
  z-index: -1;
}
.index-image {
  height: 100%;
  width: 100vw;
}
.index-top-container {
  position: absolute;
  z-index: 1;
  height: 23%;
  width: 100%;
}

.index-yunwu1 {
  position: absolute;
  height: 358.69rpx;
  width: 100%;
}

.index-logotubiao {
  height: 113rpx;
  width: 243rpx;
  margin-top: 25%;
  margin-left: 50rpx;
}

.index-text-logo {
  width: 148rpx;
  height: 36rpx;
  margin-left: 50rpx;
  margin-bottom: 100rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
  text-align: left;
  font-style: normal;
  text-transform: none;
  font-family: Source Han Sans CN-Regular;
}

.index-zhongjian-container {
  position: absolute;
  z-index: 2;
  top: 23%;
  height: 19%;
  width: 100%;
}

.index-biaotilogo {
  height: 450rpx;
  width: 180rpx;
  margin-top: 12rpx;
  margin-right: 94rpx;
  float: right;
}
.index-swiper-biaotilogo{
	height: 100%;
	width: 100%;
	z-index: 2;
}
.index-fubiaoti{
	width: 150.53rpx;
	height: 356.18rpx;
}
.index-botton-container {
  position: absolute;
  z-index: 1;
  top: 42%;
  height: 58%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.index-yunwu2 {
  position: absolute;
  height: 100%;
  width: 100%;
}

.index-anniu1 {
  z-index: 2;
  height: auto;
  width: auto;
  margin-top: 492rpx;
  margin-left: 186rpx;
}

.index-anniu2 {
	/* position: absolute; */
  z-index: 2;
  height: 159rpx;
  width: 160rpx;
  margin-left: 77%;
}

.index-anniu3 {
  z-index: 2;
  height: 40rpx;
  width: 40rpx;
  margin-left: 47%;
}
@keyframes arrowFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.index-arrow-fade {
  animation: arrowFade 1.5s infinite;
}

</style>